<template>
    <div>
        <a-form style="margin-top: 10px;width: 100%" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" >
            <ChartConfigs v-if="config.reportType!='numerical'" :chartConfig="config" @setConfig="setConfig"></ChartConfigs>
            <a-form-model-item :label="i18n('form.enab','开启联动')">
                <a-switch  size="small" v-model="config.advConfig.linkage" @change="linkageChange" />
            </a-form-model-item>
            <a-tabs default-active-key="receive" v-if="config.advConfig.linkage">
                <a-tab-pane key="receive">
                    <span slot="tab"> {{$comi18('listDef.receiveData','接收数据配置')}}</span>
                    <a-form-model :model="config.receive">
                        <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                            <a-select
                                default-value="url"
                                v-model="config.receive.type"
                                :options="sourceAry"
                                :getPopupContainer="(p) => p.parentNode"
                                :allowClear="true"
                            >
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" style="margin-top: 10px" v-if="config.receive.type == 'event'">
                            <a-select
                                v-model="config.receive.publishComponent"
                                :options="publishComponent"
                                allowClear
                                @change="changeComponent"
                                :getPopupContainer="(p) => p.parentNode"
                            >
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item :label="$comi18('listDef.primary', '参数映射')" style="margin-top: 10px">
                            <a-button-group class="abuttonhert">
                                <a-button class="abutton" @click="addParams">
                                    <i class="iconjia iconfont"></i>
                                </a-button>
                                <a-button class="abutton" @click="removeSelect()">
                                    <i class="icontrash iconfont"></i>
                                </a-button>

                                <a-button class="abutton" @click="moveUp()">
                                    <i class="iconshang iconfont"></i>
                                </a-button>

                                <a-button class="abutton" @click="moveDown()">
                                    <i class="iconxia iconfont"></i>
                                </a-button>
                            </a-button-group>
                            <a-table
                                :dataSource="config.receive.mapping"
                                :pagination="false"
                                :rowSelection="receiveRowSelection"
                                rowKey="idx_"
                                :bordered="true"
                            >
                                <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                                    <template slot-scope="text, record">
                                        <a-select
                                            v-model="record.name"
                                            :options="listParamsDef"
                                            :getPopupContainer="(p) => p.parentNode"
                                            :allowClear="true"
                                        >
                                        </a-select>
                                    </template>
                                </a-table-column>
                                <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                                    <template slot-scope="text, record">
                                        <a-select
                                            v-model="record.valueSource"
                                            :options="valueSourceDef"
                                            :getPopupContainer="(p) => p.parentNode"
                                            :allowClear="true"
                                        >
                                        </a-select>
                                    </template>
                                </a-table-column>
                                <a-table-column :title="i18n('list.paramValue','参数值')" dataIndex="valueDef">
                                    <template slot-scope="text, record">
                                        <a-select
                                            v-model="record.valueDef"
                                            :options="compomentParamsDef"
                                            :allowClear="true"
                                            :getPopupContainer="(p) => p.parentNode"
                                            v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                                        >
                                        </a-select>
                                        <a-select
                                            v-model="record.valueDef"
                                            :options="params"
                                            :allowClear="true"
                                            :getPopupContainer="(p) => p.parentNode"
                                            v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                        >
                                        </a-select>
                                        <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                        <a-input-group v-if="record.valueSource == 'script'" compact>
                                            <div style="display: flex">
                                                <a-input style="margin-right: 0px" v-model="record.valueDef" />
                                                <a-button @click="openScriptQuery(record)">...</a-button>
                                            </div>
                                        </a-input-group>
                                        <a-select
                                            v-if="record.valueSource == 'constantVar'"
                                            v-model="record.valueDef"
                                            :options="constantField"
                                            allowClear
                                            :getPopupContainer="(p) => p.parentNode"
                                        ></a-select>
                                    </template>
                                </a-table-column>
                            </a-table>
                        </a-form-model-item>
                    </a-form-model>
                </a-tab-pane>
                <a-tab-pane key="publish" v-if="config.reportType!='numerical'">
                    <span slot="tab">{{$comi18('listDef.publishData', '发布数据配置')}}</span>
                        <a-row>
                            <a-form-model-item :label="i18n('publishType','发布类型')" >
                                <a-radio-group v-model="publishType" @change="publishTypeChange">
                                    <a-radio value="event">{{i18n('default','默认')}}</a-radio>
                                    <a-radio value="window">{{i18n('popover','弹窗')}}</a-radio>
                                </a-radio-group>
                            </a-form-model-item>
                        </a-row>
                        <a-row v-if="publishType=='event'">
                            <a-form-model-item :label="$comi18('listDef.unitParams', '组件参数')" >
                                <a-select
                                    :getPopupContainer="(p) => p.parentNode"
                                    v-model="publishS"
                                    mode="multiple"
                                    :placeholder="$ti18('rxDecorator.select','请选择')"
                                    style="width: 100%"
                                    @change="publishChange"
                                >
                                    <a-select-option v-for="item in publishParams" :key="item.label" :value="item.value">
                                        {{ item.label }}
                                    </a-select-option>
                                </a-select>
                            </a-form-model-item>
                        </a-row>
                        <a-row v-else>
                            <a-form-model-item :label="i18n('List','列表')" >
                                <rx-input-button v-model="windowConfig.setting" :allowInput="true"  @click="selectList" @input="handInput"></rx-input-button>
                            </a-form-model-item>
                            <div style="margin:20px 0px 0px 10px">
                                <a-table :dataSource="windowConfig.publishParams" :pagination="false" rowKey="idx_" :bordered="true">
                                    <a-table-column :title="i18n('paramLabel','列表参数')" dataIndex="paramLabel">
                                        <template slot-scope="text, record">
                                            <span v-text="text"></span>
                                        </template>
                                    </a-table-column>
                                    <a-table-column :title="i18n('valueSource','值来源')" dataIndex="valueSource">
                                        <template slot-scope="text, record">
                                            <a-select
                                                :getPopupContainer="(p) => p.parentNode"
                                                v-model="record.valueSource"
                                                @change="record.valueDef=''"
                                            >
                                                <a-select-option  value="component">{{i18n('unitParams','组件参数')}}</a-select-option>
                                                <a-select-option  value="url">{{i18n('incomPara','传入参数')}}</a-select-option>
                                            </a-select>
                                        </template>
                                    </a-table-column>
                                    <a-table-column :title="i18n('valueDef','参数值')" dataIndex="valueDef">
                                        <template slot-scope="text, record">
                                            <a-select
                                                v-if="record.valueSource=='component'"
                                                :getPopupContainer="(p) => p.parentNode"
                                                v-model="record.valueDef"
                                                :placeholder="$ti18('rxDecorator.select','请选择')"
                                                style="width: 100%"
                                                allowClear
                                            >
                                                <a-select-option v-for="item in publishParams" :key="item.label" :value="item.value">
                                                    {{ item.label }}
                                                </a-select-option>
                                            </a-select>
                                            <a-select
                                                v-else
                                                v-model="record.valueDef"
                                                :options="params"
                                                allowClear
                                                :getPopupContainer="(p) => p.parentNode"
                                            >
                                            </a-select>
                                        </template>
                                    </a-table-column>
                                </a-table>
                            </div>
                        </a-row>
                </a-tab-pane>
                <a-tab-pane key="mapTypeConf" v-if="config.reportType=='map'">
                    <span slot="tab"> {{i18n('list.mapConfig','地图类型配置')}} </span>
                    <a-form-model :model="config.mapTypeConf">
                        <a-form-model-item :label="i18n('list.component','组件')" style="margin-top: 10px">
                            <a-select
                                v-model="config.mapTypeConf.component"
                                :options="publishComponent"
                                @change="changeComponent($event,true)"
                                allowClear
                                :getPopupContainer="(p) => p.parentNode"
                            >
                            </a-select>
                        </a-form-model-item>
                        <a-form-model-item :label="i18n('form.typeMap','类型映射')" style="margin-top: 10px" v-show="config.mapTypeConf.component">
                            <a-select
                                v-model="config.mapTypeConf.valueDef"
                                :options="compomentParamsDef"
                                allowClear
                                :getPopupContainer="(p) => p.parentNode"
                            ></a-select>
                        </a-form-model-item>
                    </a-form-model>
                </a-tab-pane>
            </a-tabs>
        </a-form>
    </div>
</template>

<script>
import {Dialog, GridMixin, Util} from "@lowcode/jpaas-common-lib";
import ChartDef from "@/views/modules/form/core/formComponent/ChartDef";
import ChartConfigs from "@/views/modules/form/core/chartDef/ChartConfigs.vue";

export default {
    name: "ChartAdvConfig",
    mixins: [GridMixin],
    components:{
        ChartConfigs
    },
    props:{
        config:{
            type:Object
        },
        selectPublish:{
            type:Array
        },
        compomentParamsDef:{
            type:Array
        },
        publishComponent:{
            type:Array
        },
        listParamsDef:{
            type:Array
        },
        params:{
            type:Array
        },
        constantField:{
            type:Array
        },
        changeComponent:{
            type:Function
        },
        genCode:{
            type:Function
        }

    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    data() {
        return {
            publishS:this.selectPublish,
            selectedRowKeys: [],
            valueSourceDef: [
                { value: 'param', label: this.$ti18('rxForm.param', '参数传入') },
                { value: 'fixedVar', label: this.$ti18('rxForm.fixedVar','固定值') },
                { value: 'script', label: this.$ti18('rxForm.script','脚本') },
                { value: 'constantVar', label: this.$ti18('rxForm.constantVar','常量') },
            ],
            sourceAry: [
                { value: 'url', label: this.i18n('form.incomParam','来自传入参数')},
                { value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件') },
            ],
            //发布参数 由维度、度量、颜色图例组成
            publishParams: [],
            //发布类型
            publishType:"event",
            windowConfig:{
                type:"list",
                setting:"",
                publishParams:[]
            }
        }
    },
    created() {
        if(this.config.reportType=='map'){
            this.listParamsDef.push({
                label:this.i18n('form.mapType','地图类型'),
                value:"mapType_"
            })
        }
        this.initPublishParams();
        if(this.config.publish){
            this.publishType = this.config.publish.publishType || "event";
            if(this.publishType=='window' && this.config.publish.windowConfig){
                this.windowConfig = this.config.publish.windowConfig
            }
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        publishChange(value){
            this.config.publish.paramMapping=[];
            for (var i = 0; i < value.length; i++) {
                var param=this.publishParams.find(item => item.value ==value[i] );
                this.config.publish.paramMapping.push({
                    key:param.value,
                    label:param.label
                })
            }
        },
        addParams() {
            if (this.config.receive.type == 'url') {
                if (!this.params || this.params.length==0) {
                    this.$notification.warning({
                        message: this.$ti18('rxMsa.tipsInfo','提示信息'),
                        description: this.i18n('msg.configure','未配置传入参数，请去配置!'),
                    })
                    return;
                }
            }
            this.config.receive.mapping.push({ idx_: Util.randomId(), name: '', valueSource: '', valueDef: '' })
        },
        moveUp() {
            this.toUp(this.config.receive.mapping, this.selectedRowKeys)
        },
        moveDown() {
            this.toDown(this.config.receive.mapping, this.selectedRowKeys)
        },
        removeSelect() {
            this.removeRows(this.config.receive.mapping, this.selectedRowKeys)
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    zIndex: 99999,
                    data: { script: record.valueDef },
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        linkageChange(value){
            //清空联动数据配置
            if(!value){
                this.config.receive={
                    publishComponent:"",
                    mapping:[]
                }
                this.config.publish={
                    paramMapping:[]
                }
            }
        },
        setConfig(val){
            this.$emit("setConfig",val);
        },
        initPublishParams() {
            this.publishParams=[];
            //维度
            for (var i = 0; i < this.config.dimensions.length; i++) {
                var obj=this.config.dimensions[i];
                this.publishParams.push({
                    label:obj.fieldLabel,
                    value: obj.tableName + "." + obj.fieldName
                });
            }
            //度量
            for (var i = 0; i < this.config.measures.length; i++) {
                var obj=this.config.measures[i];
                this.publishParams.push({
                    label:obj.fieldLabel,
                    value: obj.tableName + "." + obj.fieldName
                });
            }
            //颜色图例
            for (var i = 0; i < this.config.colorLegends.length; i++) {
                var obj=this.config.colorLegends[i];
                this.publishParams.push({
                    label:obj.fieldLabel,
                    value: obj.tableName + "." + obj.fieldName
                });
            }
            //地图
            if(this.config.reportType == 'map'){
                this.publishParams.push({
                    label:this.i18n('form.mapType','地图类型'),
                    value:"mapType_"
                })
            }
        },
        handInput(data) {
            if (!data) {
                this.windowConfig.setting="";
            }
        },
        selectList(vm) {
            var conf = {
                curVm: this,
                data: {
                    single: true,
                    isDialog: 'NO',
                },
                widthHeight: ['1000px', '600px'],
                zIndex: 999999,
            }
            var self_ = this;
            Dialog.openFormBoListDialog(conf, function (self, data) {
                if (!data) {
                    return;
                }
                var obj = data[0]
                self_.windowConfig.setting = "{value:'" + obj.key + "',text:'" + obj.name + "'}";
                if (obj.searchJson) {
                    var paramsJson = JSON.parse(obj.searchJson).filter((item) => item.type === 'income')
                    self_.handListParamsDef(paramsJson)
                }
            });
        },
        getType(type) {
            var typeObj = {string: 'S', number: 'I', date: 'D'}
            if (typeObj[type]) {
                return typeObj[type]
            }
            return 'S'
        },
        handListParamsDef(searchJson) {
            this.windowConfig.publishParams = [];
            for (var i = 0; i < searchJson.length; i++) {
                var obj = searchJson[i];
                let autoFilter=obj.autoFilter;
                var tabPre = obj.tablePre ? obj.tablePre + '.' : ''
                var type = this.getType(obj.dataType);
                var val = 'Q_' + tabPre + obj.fieldName + '_' + type + '_' + obj.fieldOp;
                if(autoFilter=='NO'){
                    val=obj.fieldName;
                }
                var o = {listParam:val,paramLabel:obj.fieldLabel,valueSource:"component",valueDef:""}
                this.windowConfig.publishParams.push(o);
            }
        },
        publishTypeChange(){
            let config = Util.deepClone(this.config);
            this.$set(config.publish,"publishType",this.publishType);
            this.setConfig(config);
        }
    },
    watch:{
        publishS(value){
            this.$emit('subtablecent',value)
        },
        'config.dimensions':{
            handler:function (val,oldval) {
                this.initPublishParams();
            },
            deep:true
        },
        'config.measures':{
            handler:function (val,oldval) {
                this.initPublishParams();
            },
            deep:true
        },
        'config.colorLegends':{
            handler:function (val,oldval) {
                this.initPublishParams();
            },
            deep:true
        },
        windowConfig:{
            handler:function (val,oldval) {
                let config = Util.deepClone(this.config);
                this.$set(config.publish,"windowConfig",this.windowConfig);
                this.setConfig(config);
            },
            deep:true
        },
    }
}
</script>

<style scoped>
.selectPublish{
    display: flex;
    margin-top: 20px;
    width: 100%;
}
.selectPublish >div:nth-child(1){
    width: 100px;
    line-height: 30px;
    text-align: right;
    padding-right: 20px;
}
</style>